<template>
    <Card :bordered="false" dis-hover class="ivu-mt">
        <Form ref="form" :model="data" :rules="rules" label-position="top" class="ivu-mt">
            <Card :bordered="false" dis-hover title="员工信息">
                <Row :gutter="24">
                    <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                        <FormItem label="员工姓名：" prop="nickName" label-for="nickName">
                            <Select v-model="data.nickName"  @on-change="findDeptName(data.nickName)"   placeholder="请选择员工" element-id="nickName">
                                <Option v-for="item in userList" :key="item.nickName" :value="item.nickName" >{{ item.nickName }}</Option>
                            </Select>

                        </FormItem>
                    </Col>
                    <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                        <FormItem label="所属角色：" >
                            <Input  :readonly="true" v-model="data.deptName" placeholder="关联部门" />
                        </FormItem>
                    </Col>
                    <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                        <FormItem label="账号：" prop="account" label-for="account">
                            <Input v-model="data.account" placeholder="请输入账号" element-id="account"/>
                        </FormItem>
                    </Col>
                </Row>
            </Card>
            <Card :bordered="false" dis-hover title="工资信息">
                <Row :gutter="24">
                    <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                        <FormItem label="基本薪资：" prop="basicSalary" label-for="basicSalary">
                            <Input v-model="data.basicSalary" placeholder="请输入" element-id="basicSalary"/>
                        </FormItem>
                    </Col>
                    <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                        <FormItem label="奖金：" prop="bonus" label-for="bonus">
                            <Input v-model="data.bonus" placeholder="请输入" element-id="bonus"/>
                        </FormItem>
                    </Col>
                    <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                        <FormItem label="午餐补贴：" prop="lunchSalary" label-for="lunchSalary">
                            <Input v-model="data.lunchSalary" placeholder="请输入" element-id="lunchSalary"/>
                        </FormItem>
                    </Col>
                    <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                        <FormItem label="请假扣除：" prop="leaveDel" label-for="leaveDel">
                            <Input v-model="data.leaveDel" placeholder="请输入" element-id="leaveDel"/>
                        </FormItem>
                    </Col>
                    <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                        <FormItem label="加班费：" prop="overworkAdd" label-for="overworkAdd">
                            <Input v-model="data.overworkAdd" placeholder="请输入" element-id="overworkAdd"/>
                        </FormItem>
                    </Col>
                    <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                        <FormItem label="考勤扣除：" prop="attendanceDel" label-for="attendanceDel">
                            <Input v-model="data.attendanceDel" placeholder="请输入" element-id="attendanceDel"/>
                        </FormItem>
                    </Col>
                </Row>
            </Card>
            <Card :bordered="false" dis-hover title="五险一金信息">
                <Row :gutter="24">
                    <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                        <FormItem label="养老金基数：">
                            <Input :readonly="true" v-model="data.pensionBase" placeholder="自动计算"/>
                        </FormItem>
                    </Col>

                    <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                        <FormItem label="养老金比率：" prop="pensionPer" label-for="pensionPer">
                            <Input :readonly="true" v-model="data.pensionPer" placeholder="请输入"
                                   element-id="pensionPer"/>
                        </FormItem>
                    </Col>
                    <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                        <FormItem label="医疗基数：">
                            <Input :readonly="true" v-model="data.medicalBase" placeholder="自动计算"/>
                        </FormItem>
                    </Col>
                    <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                        <FormItem label="医疗保险比率：" prop="medicalPer" label-for="medicalPer">
                            <Input :readonly="true" v-model="data.medicalPer" placeholder="请输入"
                                   element-id="medicalPer"/>
                        </FormItem>
                    </Col>
                    <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                        <FormItem label="失业保险基数：">
                            <Input :readonly="true" v-model="data.unempBase" placeholder="自动计算"/>
                        </FormItem>
                    </Col>
                    <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                        <FormItem label="失业保险比率：">
                            <Input :readonly="true" v-model="data.unempPer"/>
                        </FormItem>
                    </Col>
                    <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                        <FormItem label="工伤保险基数：">
                            <Input :readonly="true" v-model="data.injuryBase"/>
                        </FormItem>
                    </Col>
                    <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                        <FormItem label="工伤保险比率：">
                            <Input :readonly="true" v-model="data.injuryPer"/>
                        </FormItem>
                    </Col>
                    <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                        <FormItem label="生育保险基数：">
                            <Input :readonly="true" v-model="data.bithinsuranceBase"/>
                        </FormItem>
                    </Col>
                    <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                        <FormItem label="生育保险比率：">
                            <Input :readonly="true" v-model="data.bithinsurancePer" placeholder="请输入"/>
                        </FormItem>
                    </Col>
                    <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                        <FormItem label="公积金基数：">
                            <Input  v-model="data.accumulationFundBase" placeholder="不填则自动计算"
                            />
                        </FormItem>
                    </Col>
                    <Col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                        <FormItem label="公积金比率：">
                            <Input v-model="data.accumulationFundPer" placeholder="不填则自动计算"
                            />
                        </FormItem>
                    </Col>
                </Row>
            </Card>
        </Form>
        <FooterToolbar>
            <Button   @click="handleReset" size="large">取消</Button>
            <Button type="primary" :loading="loading" @click="handleSubmit" size="large">提交</Button>
        </FooterToolbar>
    </Card>

</template>

<script>
    import empSalary from "@/api/finance-empSalary";

    export default {
        data() {
            return {
                trafficType: '',
                formItem: {
                    checkbox: [],
                },
                userList:[],
                data: {
                    nickName:'',
                    deptName: '',
                    account: '',
                    basicSalary: '',
                    bonus: '0',
                    lunchSalary: '0',
                    leaveDel: '0',
                    overworkAdd: '0',
                    attendanceDel: '0',
                    allSalary: '0',
                    shouldSalary: '',
                    createDate: '',
                    //五险一金
                    pensionBase: '',//养老金基数
                    pensionPer: '0.08',//养老金比率
                    medicalBase: '',//医疗基数
                    medicalPer: '0.08',//医疗保险比率
                    unempBase: '',//失业保险基数
                    unempPer: '0.01',//失业保险比率
                    injuryBase: '0',//工伤保险基数
                    injuryPer: '0',//工伤保险比率
                    bithinsuranceBase: '0',//生育保险基数
                    bithinsurancePer: '0',//生育保险比率
                    accumulationFundBase: '',//公积金基数
                    accumulationFundPer: '',//公积金比率
                },
                loading: false,
                rules: {
                    nickName: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ], account: [
                        {required: true, message: '请输入', trigger: 'change'}
                    ],
                    deptName: [
                        {required: true, message: '请选择部门', trigger: 'change'}
                    ],
                    basicSalary: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    bonus: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    lunchSalary: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    leaveDel: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    overworkAdd: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    attendanceDel: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    allSalary: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    shouldSalary: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    createDate: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    pensionBase: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    pensionPer: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    medicalBase: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    medicalPer: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    unempBase: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    unempPer: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    injuryBase: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    injuryPer: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    bithinsuranceBase: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    bithinsurancePer: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    accumulationFundBase: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                    accumulationFundPer: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],

                },
            }
        },
        computed: {
            labelWidth() {
                return this.isMobile ? undefined : 140;
            },
            labelPosition() {
                return this.isMobile ? 'top' : 'left';
            },
            //计算养老金基数
            newPensionBase() {
                return this.data.pensionPer * this.data.basicSalary;
            },
            //计算医疗基数
            newmedicalBase() {
                return this.data.medicalPer * this.data.basicSalary;
            },
            //计算失业保险基数
            newunempBase() {
                return this.data.unempPer * this.data.basicSalary;
            },
            //计算公积金比率
            newaccumulationFundPer() {
                let basicSalary = this.data.basicSalary
                if (basicSalary != null) {
                    switch (true) {
                        /*1、工资范围在1-5000元之间的，包括百5000元，适用个人所得税税率为0%。 速算扣除数（元）0*/
                        case basicSalary < 5000:
                            this.data.accumulationFundPer = 0;
                            return this.data.basicSalary * this.data.accumulationFundPer;
                            break;
                        /*2、工资范围在5000-8000元之间的，包括度8000元，适用个人所得税税率为3%。 速算扣除数（元）105*/
                        case basicSalary >= 5000 && basicSalary <80000:
                            this.data.accumulationFundPer = 0.03;
                            return this.data.basicSalary * this.data.accumulationFundPer;
                            break;
                        /*3、工资范围在8000-17000元之间的，包括17000元，适用个人所得税税率为10%。速算扣除数（元）555*/
                        case basicSalary >8000 && basicSalary <= 17000:
                            this.data.accumulationFundPer = 0.1;
                            return this.data.basicSalary * this.data.accumulationFundPer;
                            break;
                        /*4、工资范围在17000-30000元之间的，包括30000元，适用个人所得税税率为20%。速算扣除数（元）1005*/
                        case basicSalary > 17000 && basicSalary <= 30000:
                            this.data.accumulationFundPer = 0.2;
                            return this.data.basicSalary * this.data.accumulationFundPer;
                            break;
                        /*5、工资范围在30000-40000元之间的，包括40000元，适用个人所得税税率为25%。速算扣除数（元）2755*/
                        case basicSalary >30000 && basicSalary <= 40000:
                            this.data.accumulationFundPer = 0.25;
                            return this.data.basicSalary * this.data.accumulationFundPer;
                            break;
                        /*6、工资范围在40000-60000元之间的，包括60000元，适用个人所得税税率为30%。速算扣除数（元）5505*/
                        case basicSalary >40000 && basicSalary <= 60000:
                            this.data.accumulationFundPer = 0.3;
                            return this.data.basicSalary * this.data.accumulationFundPer;
                            break;
                        /*7、工资范围超过60000的,适用个人所得税税率为45%。速算扣除数（元）13505*/
                        case basicSalary >60000:
                            this.data.accumulationFundPer = 0.45;
                            return this.data.basicSalary * this.data.accumulationFundPer;
                            break;
                        default:
                            break;
                    }
                }

            }
        },
        watch: {

            //养老金基数
            newPensionBase(val) {
                this.data.pensionBase = val;
            },
            //医疗基数
            newmedicalBase(val) {
                this.data.medicalBase = val;
            },
            //失业保险基数
            newunempBase(val) {
                this.data.unempBase = val;
            },
            //公积金基数
            newaccumulationFundPer(val) {
                this.data.accumulationFundBase = val;
            }
        },
        created() {
            let myIndex = this.$route.query.myIndex;
            //是否编辑渲染
            if (myIndex) {
                this.getDetails(this.$route.query.sId)
            }
            this.findUserByPage();
        },
        methods: {
            findDeptName(nickName){
                empSalary.findUserByPage({
                    nickName
                })
                    .then(res => {
                        console.log(res);
                        console.log(res[0].dept);
                        this.data.deptName = res[0].dept.deptName;
                    })
                    .catch(err => {
                        // 异常情况
                    })
            },
            //获取用户信息
            findUserByPage(){
                empSalary.findUserByPage()
                    .then(res => {
                        // 返回数据
                        this.userList = res;
                        console.log(this.userList);
                    })
                    .catch(err => {
                        // 异常情况
                    })

            },
            //编辑获取数据
            getDetails(sId){
                empSalary.getInfoById({
                    sId
                })
                    .then(res => {
                        // 返回数据
                     this.data = res;
                    })
                    .catch(err => {
                        // 异常情况
                    })
            },
            //新增
            handleSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        empSalary.addSalary({
                                nickName: this.data.nickName,
                                deptName: this.data.deptName,
                                account: this.data.account,
                                basicSalary: this.data.basicSalary,
                                bonus: this.data.bonus,
                                lunchSalary: this.data.lunchSalary,
                                leaveDel: this.data.leaveDel,
                                overworkAdd: this.data.overworkAdd,
                                attendanceDel: this.data.attendanceDel,
                                allSalary:this.data.allSalary,
                                shouldSalary: this.data.shouldSalary,
                                // createDate: this.data.createDate,
                                //五险一金
                                pensionBase: this.data.pensionBase,//养老金基数
                                pensionPer: this.data.pensionPer,//养老金比率
                                medicalBase: this.data.medicalBase,//医疗基数
                                medicalPer: this.data.medicalPer,//医疗保险比率
                                unempBase: this.data.unempBase,//失业保险基数
                                unempPer: this.data.unempPer,//失业保险比率
                                injuryBase:this.data.injuryBase,//工伤保险基数
                                injuryPer: this.data.injuryPer,//工伤保险比率
                                bithinsuranceBase: this.data.bithinsuranceBase,//生育保险基数
                                bithinsurancePer: this.data.bithinsurancePer,//生育保险比率
                                accumulationFundBase: this.data.accumulationFundBase,//公积金基数
                                accumulationFundPer: this.data.accumulationFundPer,//公积金比率
                        })
                            .then(res => {
                                // 返回数据
                                this.loading = false;
                                this.$router.push('/finance/empSalary')
                            })
                            .catch(err => {
                                // 异常情况
                            })
                    } else {
                        this.loading = false;
                    }
                });
            },
            // 新增数据
            handleCreate() {
                this.$refs.create.validate((valid) => {
                    if (valid) {
                        if (this.updateIndex < 0) {
                            // 新建
                            const mockData = this.mockOneData();
                            mockData.desc = this.createData.desc;
                            mockData.date = new Date();
                            this.list.splice(0, 0, mockData);
                            this.$Message.success('创建成功');
                        } else {
                            // 修改
                            const updateItemName = this.dataWithPage[this.updateIndex].name;
                            const updateItemIndex = this.list.findIndex(item => item.name === updateItemName);
                            this.list[updateItemIndex].desc = this.createData.desc;
                            this.$Message.success('修改成功');
                        }

                        this.showCreate = false;
                        this.creating = false;
                        this.$nextTick(() => {
                            this.creating = true;
                        });
                    } else {
                        this.creating = false;
                        this.$nextTick(() => {
                            this.creating = true;
                        });
                    }
                });
            },
            //取消
            handleReset(name) {
                // this.$refs[name].resetFields();
                this.$router.push('/finance/empSalary')
            },

        }

    }
</script>

<style scoped>

</style>
